<template>
	<view>
		<el-dialog title="题目详情" :visible.sync="dialogVisible" width="60%">
			<el-row>
				<el-col :span="2" style="height: 100%; ">
					<view style="height: 100%;  margin-top: 2rem" >
						<el-button type="primary" icon="el-icon-arrow-left" circle @click="goLastQuestion()"></el-button>
					</view>
				</el-col>
				<el-col :span="20">
					
					<view class="cu-bar bg-white solid-bottom  text-xl">
						<view class="action">
							<text class="cuIcon-titles text-blue"></text>
							<DictTag :options="choiceCategoryOptions" :value="question.choiceCategory" />
						</view>
						<view class="action ">
							<button class="cu-btn cuIcon margin-right-xl lg" @click="questionFavorite()"
								:class="favoriteStatus ? 'bg-green' : 'bg-gray'">
								<text class="cuIcon-favor"></text>
							</button>
							<button class="cu-btn cuIcon bg-blue lg" @click="openNoteModel()">
								<text class="cuIcon-edit"></text>
							</button>
						</view>
					</view>
				
					<view class="bg-white padding-sm" v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
						<view class="text-xl ">
							题干：</text>{{question.stem}}
						</view>
					</view>
					<!-- 题目内容 -->
					<view class=" bg-white" v-for="(issue, index) in issues" :key="index">
						<view class="padding-sm">
							<view v-if="question.choiceCategory == 12 || question.choiceCategory == 21">
								<text class="text-bold text-xl ">
									{{index + 1}}) {{issue.issue}}
								</text>
							</view>
							<view v-else>
								<text class="text-bold text-xl ">
									{{issue.issue}}
								</text>
							</view>
							<!-- 做题选项 -->
							<view v-if="!question.answerFlag">
								<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions"
									:key="optionindex" @click="issueOptionChange(issue, optionindex)">
									<view class="flex text-xl">
										<view class="cu-tag round text-xl " :class="option.checked ? 'bg-green' : ''">
											<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
										</view>
										<view class="padding-left-sm flex">
											{{option.label}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 答案选项 -->
						<view v-if="question.answerFlag">
							<view class="padding-sm" v-for="(option, optionindex) in issue.issueOptions" :key="optionindex">
								<view class="flex text-xl ">
									<view class="cu-tag round text-xl "
										:class="option.checked ? 'optionclass' + option.status : ''">
										<DictTag :options="choiceAnswerOptions" :value="optionindex + 1" />
									</view>
									<view class="padding-left-sm flex"
										:class="option.checked ? 'optionclass-text' + option.status : ''">
										{{option.label}}
									</view>
								</view>
							</view>
							<view class="cu-list menu ">
								<view class="cu-item padding-lr-sm">
									<view class="content">
										<text class="">答案：</text>
										正确答案
										<text class="text-green padding-left-sm text-bold">{{issue.answer}}</text>,
										你的答案
										<text class=" padding-left-sm text-bold"
											:class="issue.answer == issue.myanswer ? 'text-green' : 'text-red'">{{issue.myanswer}}</text>
									</view>
									<view class="action" @click="gotoFix()">
										<button class="cu-btn round sm bg-grey">题目纠错</button>
									</view>
								</view>
				
								<view class="cu-item explain margin-bottom-xl">
									<view class="content padding-tb-sm">
										<text class="">解析：</text>
										<u-parse :content="issue.answerExplain" v-if="issue.answerExplain"></u-parse>
										{{issue.answerExplain? "" : "本题暂无解读"}}
										<button class="cu-btn round sm bg-grey margin-left-lg " v-if="!issue.answerExplain"
											@click="gotoResolve()">我来添加</button>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="padding margin-top-lg text-center" style="width: 100%;" v-if="!question.answerFlag">
						  <el-button type="primary" @click="submitAnswer()" >提交答案</el-button>
					</view>
					
					
					<!-- 笔记弹窗 -->
					<u-popup :show="isShowNoteModel" mode="right" @close="closeNoteModel" :closeable="true">
						<view class="padding margin-top" style="width: 600rpx;">
							<view class="margin-top">
								<u--textarea v-model="curNote.content" placeholder="留下努力的痕迹,卷王之王~" count></u--textarea>
								<view class="padding flex flex-direction">
									<button class="cu-btn bg-blue lg text-bold round "
										@click="questionNoteSave()">保存笔记</button>
								</view>
							</view>
							<view class="margin-top">
								<view class="action text-xl">
									<text class="cuIcon-titles text-blue"></text>
									笔记列表
								</view>
							</view>
							<view class="margin-top-sm" v-for="(item, index) in noteList" :key="index"
								@click="questionNoteEdit(item)">
								<view class="bg-gray padding ">
									<view class='cu-tag round bg-blue sm margin-right-sm' v-if="item.editStatus">我的笔记</view>
									{{item.content}}
									<view class="padding-top cuIcon-people text-grey ">
										<text class="padding-left-xs">{{item.createBy}}</text>
									</view>
									<view class="cuIcon-time text-grey ">
										<text class="padding-left-xs">{{item.createTime}}</text>
									</view>
								</view>
							</view>
							<view v-if="noteList.length == 0" class="padding margin-top-xl">
								<u-empty mode="list" text="暂无笔记内容, 请前往添加哦~">
								</u-empty>
							</view>
						</view>
					</u-popup>
					
				</el-col>
				
				<el-col :span="2" style="height: 100%; ">
					<view style="height: 100%;  margin-top: 2rem " class="fr"> 
						<el-button type="primary" icon="el-icon-arrow-right" circle @click="goNextQuestion()"></el-button>
					</view>
				</el-col>
			</el-row>

		</el-dialog>
		<QuestionFix ref="questionFixModel"></QuestionFix>
		<QuestionResolve ref="questionResolveModel"></QuestionResolve>
	</view>
</template>

<script>
	import {
		getDictData
	} from "@/api/api.js"
	import {
		qbmsQuestionChapterData,
		qbmsQuestionAnswerRenewal,
		qbmsQuestionInfo,
		questionAnswerCheck,
		qbmsQuestionList,
		qbmsQuestionFavorite,
		qbmsQuestionFavoriteRecord,
		qbmsQuestionNoteContent,
		qbmsQuestionNoteSave,
	} from "@/api/qbms.js";

	export default {
		name: "QuestionDetail",
		data() {
			return {
				dialogVisible: false,
				questionId: 0,

				chapterId: 0, // 章节ID
				subjectName: "", // 学科名称
				chapterName: "", // 章节名称
				questionChapterData: [], // 题目章节数据

				pageNum: 1,
				total: 0,
				choiceCategoryOptions: [], // 题目类型
				choiceAnswerOptions: [], // 答案选项
				question: {}, // 题目信息
				issues: [], // 问题
				favoriteStatus: false, // 题目收藏状态
				isShowNoteModel: false, // 是否显示笔记
				curNote: { // 当前笔记
					content: "",
				},
				noteList: [], // 笔记列表

			};
		},
		methods: {
			show(questionId) {

				this.questionId = questionId;
				this.dialogVisible = true;
				this.initData();
				this.initDict();
			},

			/** 初始化数据 */
			initData() {
				this.getQuestionInfo();
			},
			/** 关闭笔记弹窗 */
			closeNoteModel() {
				this.isShowNoteModel = false;
			},
			/** 打开笔记弹窗 */
			openNoteModel() {
				this.clearCurNote();
				this.isShowNoteModel = true;
			},
			/** 获取题目信息 */
			getQuestionInfo() {
				qbmsQuestionInfo({
					questionId: this.questionId
				}).then(res => {
					this.question = res.data;
					this.issues = res.data.issues;
					this.getQuestionFavoriteRecord();
					this.getQuestionContent();
				})
			},

			/** 问题选项改变 */
			issueOptionChange(issue, index) {
				// 题目类型
				let choiceCategory = this.question.choiceCategory;
				let issueOptions = issue.issueOptions;
				let checked = !issueOptions[index].checked;
				if (choiceCategory < 20) { // 单选题
					issueOptions.forEach(function(ele, i) {
						ele.checked = false
					})
					issueOptions[index].checked = checked
				} else {
					issueOptions[index].checked = checked;
				}
			},

			/** 提交答案 */
			submitAnswer() {
				let issuesAnswer = [];
				let flag = true;
				// 构建提交信息
				this.issues.forEach(function(issue) {
					let optionstr = ""; // 选项字符串
					issue.issueOptions.forEach(function(option, index) {
						if (option.checked) {
							optionstr += (index + 1) + ",";
						}
					})
					if (optionstr == "") {
						flag = false;
					}
					// 去除最后一个逗号
					if (optionstr.length > 1) {
						optionstr = optionstr.substring(0, optionstr.length - 1);
					}
					issuesAnswer.push({
						id: issue.id,
						answer: optionstr
					});

				})
				if (flag) {
					questionAnswerCheck({
						questionId: this.question.id,
						issues: issuesAnswer
					}).then(res => {
						this.question = res.data;
						this.issues = res.data.issues;
					})

				} else {
					uni.showToast({
						title: '请作答后提交',
						icon: "none",
					});
				}

			},


			/** 获取题目章节数据 */
			getQusetionChapterData() {
				qbmsQuestionChapterData({
					chapterId: this.chapterId
				}).then(res => {
					this.questionChapterData = res.data;
				})
			},
			

			/** 获取题目收藏记录 */
			getQuestionFavoriteRecord() {
				qbmsQuestionFavoriteRecord({
					questionId: this.question.id
				}).then(res => {
					this.favoriteStatus = res.data
				})
			},

			/** 收藏题目 */
			questionFavorite() {
				qbmsQuestionFavorite({
					questionId: this.question.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.favoriteStatus = res.data
				})
			},
			/** 题目笔记编辑 */
			questionNoteEdit(note) {
				if (note.editStatus) {
					this.curNote = note;
				}
			},

			/** 题目笔记保存 */
			questionNoteSave() {
				this.curNote.questionId = this.question.id;
				if (this.curNote.content.length <= 5) {
					uni.showToast({
						title: "请输入笔记内容, 内容不少于5个字符",
						icon: "none"
					})
					return;
				}
				this.closeNoteModel();
				this.$util.$confirm(" 切勿上传无用、违规等内容，平台将对相关账户进行锁定封禁").then(res => {
					this.confirmSubmitNote();
				}).catch(err => {
					this.openNoteModel();
				})

			},

			/** 确认提交笔记 */
			confirmSubmitNote() {
				qbmsQuestionNoteSave(this.curNote).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: "none"
					})
					this.openNoteModel();
					this.clearCurNote();
					this.getQuestionContent();
				})
			},

			clearCurNote() {
				this.curNote = {
					content: "",
				}
			},
			/** 获取题目笔记内容 */
			getQuestionContent() {
				qbmsQuestionNoteContent({
					questionId: this.question.id
				}).then(res => {
					this.noteList = res.data;
				})
			},

			/** 初始化字典 */
			initDict() {
				// 获取题库类型字典
				getDictData({
					dictType: "qbms_choice_category"
				}).then(res => {
					this.choiceCategoryOptions = res.data;
				})
				// 选择题答案选项
				getDictData({
					dictType: "qbms_choice_answer_options"
				}).then(res => {
					this.choiceAnswerOptions = res.data;
				})
			},

			/** 跳转题目清单 */
			gotoQuestionList() {
				uni.$u.route({
					url: "/pages/qbms/chapterQuestion",
					params: {
						chapterId: this.chapterId,
						chapterName: this.chapterName,
						subjectName: this.subjectName,
					}
				})
			},

			/** 跳转题目纠错界面 */
			gotoFix() {
				this.$refs.questionFixModel.show(this.question.id);
			},

			/** 跳转题目解析界面 */
			gotoResolve() {
				this.$refs.questionResolveModel.show(this.question.id);
			},
			
			/** 跳转下一题 */
			goNextQuestion() {
				this.$emit('next');
			},
			
			/** 跳转上一题 */
			goLastQuestion() {
				this.$emit('last');
			},
		}
	}
</script>
<style scoped lang="scss">

	.optionclass1 {
		background-color: #39b54a !important;
		color: #ffffff;
	}

	.optionclass-text1 {
		color: #39b54a;
	}

	.optionclass2 {
		background-color: #39b54a !important;
		color: #ffffff;
	}

	.optionclass-text2 {
		color: #39b54a;
	}

	.optionclass3 {
		background-color: #e54d42 !important;
		color: #ffffff;
	}

	.optionclass-text3 {
		color: #e54d42;
	}

	.explain {

		background-color: #f4f4f5 !important;
	}
</style>
